/**搜索
 * 
 * 栏组件 */

import React from "react";
import { Flex } from 'antd-mobile'
import { withRouter } from "react-router-dom";
import './index.scss'
import PropTypes from 'prop-types'
// function SearchHeader({ history, cityName, className }) {
//     return (
//         <Flex className={["search-box", className || ""].join(" ")}>
//             {/* 左侧白色区域 */}
//             <Flex className='search'>
//                 {/* 位置 */}
//                 <div className="location"
//                     onClick={() => history.push('/citylist')}>
//                     <span className="name">{cityName}</span>
//                     <i className="iconfont icon-arrow" />
//                 </div>
//                 {/* 搜索表单 */}
//                 <div className="form" onClick={() => history.push('/search')}>
//                     <i className="iconfont icon-seach" />
//                     <span className="text">请输入小区或地址</span>
//                 </div>
//             </Flex>
//             {/* 右侧地图图标 */}
//             <i className="iconfont icon-map" onClick={() => history.push('/map')} />

//         </Flex>
//     )
// }


class SearchHeader extends React.Component {
    timer = null
    gotoCityList(props) {   //解决用户连续点击城市选项报错的bug
        clearTimeout(this.timer)
        this.timer = setTimeout(() => {
            props.history.push('/citylist');
        }, 200);
    }
    render() {
        return (
            <Flex className={["search-box", this.props.className || ""].join(" ")}>
                {/* 左侧白色区域 */}
                <Flex className='search'>
                    {/* 位置 */}
                    <div className="location"
                        onClick={() => this.gotoCityList(this.props)}>
                        <span className="name">{this.props.cityName}</span>
                        <i className="iconfont icon-arrow" />
                    </div>
                    {/* 搜索表单 */}
                    <div className="form" onClick={() => this.props.history.push('/search')}>
                        <i className="iconfont icon-seach" />
                        <span className="text">请输入小区或地址</span>
                    </div>
                </Flex>
                {/* 右侧地图图标 */}
                <i className="iconfont icon-map" onClick={() => this.props.history.push('/map')} />

            </Flex>
        )
    }
}
//添加校验规则
SearchHeader.propTypes = {
    cityName: PropTypes.string.isRequired,
    className: PropTypes.string
}
export default withRouter(SearchHeader)